<!-- 系统登录页面 -->
<template>
  <div class="pageLogin">
    <canvas></canvas>
    <div class="row">
      <h1 class="systermTitle">后台管理平台</h1>
      <div class="loginBox">
        <div class="title">登录界面</div>
        <div class="form">
          <el-form :model="loginForm" ref="loginForm" :rules="rules">
            <el-form-item prop="account" label="账号">
              <el-input
                placeholder="请输入账号"
                v-model="loginForm.account"
                auto-complete="off"
                prefix-icon="el-icon-user"
                maxlength="10"
              ></el-input>
            </el-form-item>
            <el-form-item prop="pwd" label="密码">
              <el-input
                placeholder="请输入密码"
                v-model="loginForm.pwd"
                show-password
                prefix-icon="el-icon-key"
                auto-complete="off"
                maxlength="20"
              ></el-input>
            </el-form-item>
          </el-form>
        </div>
        <div class="btn">
          <el-button
            type="primary"
            size="medium"
            icon="el-icon-thumb"
            @click.native="login"
            id="queryBtn">
            登 录
          </el-button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
// import 导入其他文件
/* eslint-disable */
export default {
  name: "Login",
  // import引入的组件需要注入到对象
  components: {},
  data() {
    // 这里存放数据
    return {
      loginForm: {
        account: "",
        pwd: ""
      },
      rules: {
        account: [
          { required: true, message: "请输入账号", trigger: 'blur' },
          { min: 3, max: 10, message: '长度在 3 到 10 个字符', trigger: 'change' }
        ],
        pwd: [
          { required: true, message: "请输入密码", trigger: 'blur' },
          { min: 5, max: 20, message: '长度在 5 到 20 个字符', trigger: 'change' }
        ]
      }
    };
  },
  // 监听属性
  computed: {},
  // 监控data中的数据变化
  watch: {},
  // 方法集合
  methods: {
    jumpto(path) {
      this.$router.push(path);
    },
    backToBoard() {},
    keyDown(e) {
      //回车键登录
      if (e.keyCode == 13) {
        return false;
      }
    },
    keyUp(e) {
      if (e.keyCode == 13) {
        document.getElementById("queryBtn").click();
        // this.login()
      }
    },

  },
  created() {
    let judge = navigator.userAgent.match(
      /(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i
    );
    if (judge) {
      this.$router.push("/phoneLogin");
    } else {
    }
  },
  // 生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {
    window.addEventListener("keydown", this.keyDown);
    window.addEventListener("keyup", this.keyUp);
    const canvas = document.querySelector('canvas');
        if (typeof canvas.getContext === 'undefined') {
            return;
        }
        const ctx = canvas.getContext("2d");

        function fitCanvasSize() {

            canvas.width = document.documentElement.clientWidth;
            canvas.height = document.documentElement.clientHeight;

        }
        fitCanvasSize();
        window.onresize = fitCanvasSize;

        var balls = [];

        function rand(min, max) {
            return Math.floor(Math.random() * (max - min + 1)) + min;
        }

        var Ball = function () {
            this.r = rand(10, 18);
            this.x = rand(0 + this.r, canvas.width - this.r);
            this.y = rand(0 + this.r, canvas.height - this.r);
            this.vx = rand(-3, 3);
            this.vy = rand(-3, 3);
            this.opacity = Math.random();
            this.draw = function () {
                ctx.beginPath();
                ctx.arc(this.x, this.y, this.r, 0, Math.PI * 2);
                var color = ctx.createRadialGradient(this.x, this.y, this.r * .7, this.x, this.y, this.r);
                color.addColorStop(.6, '#fffbff');
                color.addColorStop(1, '#2e9dff');
                ctx.shadowColor = "#2e9dff";
                ctx.shadowBlur = this.r * 1.3;
                ctx.fillStyle = color;
                ctx.globalAlpha = this.opacity;
                ctx.closePath();
                ctx.fill();
            };
            this.move = function () {
                if (this.x + this.r > canvas.width || this.x - this.r < 0) {
                    this.vx *= -1;
                }
                if (this.y + this.r > canvas.height || this.y - this.r < 0) {
                    this.vy *= -1;
                }
                this.x += this.vx;
                this.y += this.vy;
            }
        };

        function density() {
            var i;
            for (i = 0; i < 100; i++) {
                balls.push(new Ball);
            }
        };
        density();

        function update() {
            var i;
            ctx.clearRect(0, 0, canvas.width, canvas.height);
            for (i = 0; i < 100; i++) {
                balls[i].draw();
                balls[i].move();
            }
            setTimeout(function () {
                update();
            }, 30)
        };
        update();
  },
  destroyed() {
    this.loginForm = "";
  }
};
</script>

<style lang='less' scoped>
canvas {    display: block;    background: #0b222c;position: fixed;}
.pageLogin {
  overflow: hidden;
  position: absolute;
  width: 100%;
  min-width: 300px;
  height: 100%;
  background-color: #3a3a3a;
//   background-image: linear-gradient(
//     141deg,
//     #9fb8ad 0%,
//     #1fc8db 51%,
//     #2cb5e8 75%
//   );
  .backTo {
    position: absolute;
    top: 5px;
    right: 5px;
  }
  .row {
    width: 100%;
    padding: 13% 0;
  }
  .systermTitle {
    position: relative;
    line-height: 70px;
    font-size: 46px;
    white-space: nowrap;
    color: #ffffff;
    text-align: center;
  }
  .loginBox {
    position: relative;
    margin: 0 auto;
    width: 40%;
    min-width: 300px;
    min-height: 200px;
    padding: 50px 10px;
    background: #ffffff63;
    border: 1px solid #eeeeee;
    border-radius: 10px;
    text-align: center;
    .title {
      position: absolute;
      color: #fff;
      top: 0;
      left: 0;
      width: 100%;
      height: 50px;
      line-height: 50px;
      font-size: 18px;
      text-align: left;
      padding: 0 20px;
    }
    .form {
      position: relative;
      width: 85%;
      height: 100%;
      padding: 20px;
    }
    .el-form{
        .el-form-item{            
            & > .el-form-item__label{
                color:red!important
            }
        }
    }
    .btn {
      position: absolute;
      display: flex;
      justify-content: space-around;
      bottom: 0;
      left: 0;
      width: 100%;
      height: 50px;
      padding: 8px 20px 7px;
      & > button {
        min-width: 140px;
      }
    }
  }
}
</style>
